<template>
  <div>
    <div style="text-align:center;margin-top:50px">
      <el-form :inline="true" :model="QueryObj" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="QueryObj.name" placeholder="讲师姓名"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="QueryObj.level" placeholder="头衔">
            <el-option label="高级讲师" value="1"/>
            <el-option label="首席讲师" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="QueryObj.joinDateBegin"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"/>
          <el-date-picker
            v-model="QueryObj.joinDateEnd"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="serch">搜索</el-button>
          <el-button @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div><el-button type="danger" @click="handleBatchDel">批量删除</el-button></div>

    <el-table :data="teachers" stripe style="padding:20px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="编号" type="index" width="50" />
      <el-table-column label="头像" prop="avatar" width="100" >
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:80px;heigth:80px">
          <img v-else src="https://sh0225-gulionlineyq.oss-cn-shanghai.aliyuncs.com/moren/%E5%85%83%E6%97%A6%E6%B0%94%E6%B3%A1%E6%A8%A1%E7%89%88-%E5%90%83%E6%B1%A4%E5%9C%86.jpg" style="width:80px;heigth:80px">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="intro" label="简介" width="700"/>
      <el-table-column prop="sort" label="排序" />
      <el-table-column prop="level" label="头衔" >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.level === 1 ? 'primary' : 'success'"
            disable-transitions>{{ scope.row.level===1?'高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="joinDate" label="加入日期" />

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:50px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import teacherApi from '@/api/teacher'
export default {
  data() {
    return {
      QueryObj: {},
      teachers: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      selection: []
    }
  },
  created() {
    // this.getTeachers()
    this.getTeacherPage()
  },
  methods: {
    handleBatchDel() {
      // console.log(this.selection)
      if (this.selection.length === 0) {
        this.$message.warning('请选择你要删除的讲师')
        return
      }
      const arr = []
      this.selection.forEach(item => {
        arr.push(item.id)
      })
      // console.log(arr)
      teacherApi.batchDel(arr).then(r => {
        this.$message.success('批量删除成功')
        this.getTeacherPage()
      })
    },
    handleSelectionChange(selection) {
      this.selection = selection
    },
    clear() {
      this.QueryObj = {}
      this.pageNum = 1
      this.getTeacherPage()
    },
    serch() {
      this.pageNum = 1
      this.getTeacherPage()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageNum = 1
      this.pageSize = val
      this.getTeacherPage()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pageNum = val
      this.getTeacherPage()
    },
    getTeacherPage() {
      teacherApi.getTeacherPage(this.pageNum, this.pageSize, this.QueryObj).then(r => {
        this.teachers = r.data.page.records
        this.total = r.data.page.total
      })
    },
    handleEdit(index, teacher) {
      // this.$router.push('/teacher/edit?id=' + teacher.id)
      this.$router.push(`/teacher/edit/${teacher.id}`)
    },
    handleDelete(index, teacher) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacherApi.deleteTeacher(teacher.id).then(r => {
          this.$message.success(`删除【${teacher.name}】成功`)
          if (this.teachers.length === 1) {
            this.pageNum = this.pageNum - 1
          }
          this.getTeacherPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getTeachers() {
      teacherApi.getTeachers()
        .then(r => {
          console.log(r)
          this.teachers = r.data.items
        })
    }
  }
}
</script>
